<template>
  <!-- 选择表格 -->
  <div>
    <template v-if="handleType === 'scan'">
      <span class="scan-text">{{ selectLabel }}</span>
    </template>
    <template v-else>
      <div class="form-select-table" :class="{ 'form-select-table__mul': action.eicType === 'checkbox_long' }">
        <div class="tag-wrapper" v-for="item in tags" :key="item.item_value">
          <el-tag type="info" @click="selectHandle(item)" :class="{ active: selected.indexOf(item.item_value) > -1 }">
            {{ item.item_text }}
          </el-tag>
        </div>
      </div>
    </template>
  </div>
  <!-- 选择表格 -->
</template>

<script>
  import { queryDict } from '@/api/common';
  export default {
    components: {},
    props: {
      // clone克隆、edit编辑、scan查看
      handleType: {
        type: String
      },
      action: {
        type: Object,
        default: () => {
          return {};
        }
      },
      selected: {
        type: Array,
        default: () => {
          return [];
        }
      }
    },
    data() {
      return {
        tags: [],
        selectLabel: ''
      };
    },
    watch: {
      action: {
        async handler(val) {
          if (val) {
            if (val.tags) {
              this.tags = val.tags;
              this.filterHande();
            } else {
              const { data } = await queryDict({ dict: val.eicParameter });
              if (data.success) {
                this.tags = data.result || [];
                this.filterHande();
              }
            }
          }
        },
        immediate: true
      }
    },
    computed: {},
    methods: {
      selectHandle(item) {
        const newSelected = JSON.parse(JSON.stringify(this.selected));
        const pos = newSelected.indexOf(item.item_value);

        if (pos > -1) {
          newSelected.splice(pos, 1);
        } else {
          newSelected.push(item.item_value);
        }
        this.$emit('selectChange', { eicCode: this.action.eicCode, value: newSelected });
      },
      filterHande() {
        if (this.handleType !== 'scan') {
          return;
        }
        const list = this.tags.filter((e) => {
          return this.selected.indexOf(e.item_value) > -1;
        });
        if (list && list.length > 0) {
          this.selectLabel = list
            .map((e) => {
              return e.item_text;
            })
            .join(',');
        }
      }
    },
    created() {},
    mounted() {}
  };
</script>
<style lang="scss">
  .form-select-table {
    display: flex;
    flex-wrap: wrap;
    .el-tag {
      margin: 5px;
      &.active {
        background: #409eff;
        color: #fff;
      }
    }
    &__mul {
      flex-direction: column;
      width: 100%;
      .tag-wrapper {
        border-bottom: 1px solid #e4e4e4;
        flex: 1;
      }
    }
  }
</style>
